@import "variables";
@import "mixins";
@import "layout";

\::-webkit-input-placeholder {
  color: #9a9994 !important;
}

input:-moz-placeholder {
  color: #9a9994 !important;
}

input.inactive {
  color: #9a9994 !important;
}

input.active {
  color: $font-color !important;
}

input, textarea {
  font-family: $base-font-family;
  font-size: 14px;
  outline: none;
}

.windows.chrome input,
.windows.chrome textarea,
.windows.ie8 input,
.windows.chrome textarea {
  font-family: $base-font-family-fallback !important;
}

form#search {
  position: absolute;
  top: 10px;
  right: 0;
  z-index: 1000;
  width: 262px;
  padding-left: 32px;
  @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
  background-color: $main-bg !important;
  border: solid 1px #ceccc5;
  @include border-radius(20px);
  @include box-shadow(inset 0 1px 4px #ddd);

  input {
    @include border-radius(20px);
    width: 100%;
    height: 20px;
    margin-top: 4px;
    margin-bottom: 2px;
    line-height: 1em;
    color: $font-color;
    background-color: transparent;
    border: 0;
  }

  &.focus {
    border-color: #007175;
    background-color: #fff;
  }
}

// Breakpoint ----------------
@media (max-width: $default) {
  form#search{
    @include center-transformX;
    margin-top: 7px;
    top: unset;
    width: 92%;
  }
}

// Mobile
@media (max-width: $mobile-m) {
  form#search{
    width: 84%;
    #search-text {
      padding: 0.3rem 0.1rem;
    }
  }
}
